<template>
	<view class="backschool-box">
		<page-head :transparent='true'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right">{{''}}</slot>
		</page-head>
		<!-- S = banner图片-->
		<view class="backschool-banner">
			<image :src="backSchoolBanner" mode="widthFix"></image>
			<image :src="schoolNav1" mode="widthFix"></image>
		</view>
		<!-- E = banner图片-->
		
		<!-- S = 5折封顶-->
		<view class="backschool-percent">
			<image :src="percent.img" mode="widthFix" v-for="(percent, index) in percentList" :key="index" @click="linkTo(percent.url, index)"></image>
		</view>
		<!-- E = 5折封顶-->
		
		<!-- S = 热销爆款nav-->
		<view class="backschool-nav">
			<image :src="schoolNav2" mode="widthFix"></image>
		</view>
		<!-- E = 热销爆款nav-->
		
		<!-- S = 热销爆款-->
		<view class="backschool-boom">
			<image :src="boom.img" mode="widthFix" v-for="(boom, index) in boomList" :key="index" @click="linkTo(boom.url, index)"></image>
		</view>
		<!-- E = 热销爆款-->
		
		<!-- S = more优惠-->
		<view class="backschool-nav">
			<image :src="schoolNav3" mode="widthFix" @click="toGo"></image>
		</view>
		<!-- S = more优惠-->
	</view>
</template>

<script>
	import backSchoolBanner from '../../static/img/back-to-school/backSchoolBanner.png'
	
	import schoolNav1 from '../../static/img/back-to-school/schoolNav1.png'
	import schoolNav2 from '../../static/img/back-to-school/schoolNav2.png'
	import schoolNav3 from '../../static/img/back-to-school/schoolNav3.png'
	
	import schoolTab1 from '../../static/img/back-to-school/schoolTab1.png'
	import schoolTab2 from '../../static/img/back-to-school/schoolTab2.png'
	import schoolTab3 from '../../static/img/back-to-school/schoolTab3.png'
	import schoolTab4 from '../../static/img/back-to-school/schoolTab4.png'
	
	import schooltop1 from '../../static/img/back-to-school/schooltop1.png'
	import schooltop2 from '../../static/img/back-to-school/schooltop2.png'
	import schooltop3 from '../../static/img/back-to-school/schooltop3.png'
	import schooltop4 from '../../static/img/back-to-school/schooltop4.png'
	import schooltop5 from '../../static/img/back-to-school/schooltop5.png'
	import schooltop6 from '../../static/img/back-to-school/schooltop6.png'
	import schooltop7 from '../../static/img/back-to-school/schooltop7.png'
	import schooltop8 from '../../static/img/back-to-school/schooltop8.png'
	import schooltop9 from '../../static/img/back-to-school/schooltop9.png'
	import schooltop10 from '../../static/img/back-to-school/schooltop10.png'
	
	export default {
		data() {
			return {
				title:'开学季',
				backSchoolBanner: backSchoolBanner,
				schoolNav1: schoolNav1,
				schoolNav2: schoolNav2,
				schoolNav3: schoolNav3,
				percentList: [
					{
						img: schoolTab1,
						url: '../selfdetail/selfdetail?skuId=3344&cid=385,650&title=丹尼尔惠灵顿女士带日历石英手表&seller=京东自营'
					},
					{
						img: schoolTab2,
						url: '../selfdetail/selfdetail?skuId=970&cid=395,1053&title=THERMOS膳魔师凯菲304不锈钢保温杯情侣杯弹跳杯便携车载杯CSYT-500-ALB 磨砂黑&seller=京东自营'
					},
					{
						img: schoolTab3,
						url: '../selfdetail/selfdetail?skuId=7022&cid=92,1079&title=透真玻尿酸补水保湿蚕丝眼膜贴10片&seller=好品购'
					},
					{
						img: schoolTab4,
						url: '../selfdetail/selfdetail?skuId=3622&cid=240&title=京鱼座丨叮咚 智能音箱 蓝牙/WIFI音响 AI家庭助手 2代新旗舰版 北欧灰&seller=好品购'
					}
				],
				boomList: [
					{
						img: schooltop1,
						url: '../selfdetail/selfdetail?skuId=7919&cid=397&title=悦诗风吟 Innisfree 橄榄油泡沫清洁保湿净颜洗面奶洁面乳150mlX2只装 （水润保湿 植物精萃 ）&seller=京东自营'
					},
					{
						img: schooltop2,
						url: '../selfdetail/selfdetail?skuId=7591&cid=674&title=京选10000毫安时迷你充电宝 一万毫安快充移动电源 10000mAh充电宝&seller=京东自营'
					},
					{
						img: schooltop3,
						url: '../selfdetail/selfdetail?skuId=849&cid=372&title=瑞动（SWISSMOBILITY）20英寸商务新时尚登机箱全新PC ABS商务旅行箱MT-5058-82T00黑底银白编织纹&seller=好品购'
					},
					{
						img: schooltop4,
						url: '../selfdetail/selfdetail?skuId=2932&cid=413&title=欧乐B（Oralb）电动牙刷 成人便携电池式电动牙刷（自带刷头*1）DB4510&seller=京东自营'
					},
					{
						img: schooltop5,
						url: '../selfdetail/selfdetail?skuId=2774&cid=116&title=水星家纺 全棉四件套纯棉 斜纹印花床品套件床单被罩被单 品格宣言（绿色） 双人加大1.8米床&seller=京东自营'
					},
					{
						img: schooltop6,
						url: '../selfdetail/selfdetail?skuId=7499&cid=320&title=阿道夫（ADOLPH）轻柔丝滑洗护组合3件套（洗发水420ml*2 护发素420ml）送旅行装*3&seller=好品购'
					},
					{
						img: schooltop7,
						url: '../selfdetail/selfdetail?skuId=7863&cid=373&title=美旅AmericanTourister明星同款韩版双肩背包 笔记本电脑包男女书包双肩包&seller=京东自营'
					},
					{
						img: schooltop8,
						url: '../selfdetail/selfdetail?skuId=7593&cid=92&title=ANNABELLA泰国海藻面膜 富含深海矿物精华10片/盒 安娜贝拉深层补水面膜&seller=好品购'
					},
					{
						img: schooltop9,
						url: '../selfdetail/selfdetail?skuId=7463&cid=415&title=雷瓦(RIWA) 电吹风机 家用大功率快速干发吹风筒2200W&seller=京东自营'
					},
					{
						img: schooltop10,
						url: '../selfdetail/selfdetail?skuId=7750&cid=566&title=飞利浦 (PHILIPS) LED台灯 工作学习卧室床头灯  酷恒4000K中性光&seller=好品购'
					}
				]
			}
		},
		onShow() {
			genCommonData();
		},
		methods: {
			toGo() {
				h5NavigateTo({
					url: '../selfsupport/selfsupport?title=好品购&cat_id=0'
				})
			},
			linkTo(url, index) {
				if(url !== '') {
					onEvent('page_home_top_banner1_goods' + (parseInt(index) + parseInt(1)));
					setTimeout(function() {
						if (url !== '') {
							h5NavigateTo({
								url: decodeURI(url)
							});
						}
					}, 1000);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.backschool-box{
		width: 100%;
		background: #FFD400;
		
		.backschool-banner, .backschool-nav{
			width: 100%;
			
			image{
				width: 100%;
				display: block;
			}
		}
		
		.backschool-percent{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			
			image{
				width: 100%;
				display: block;
			}
		}
		
		.backschool-boom{
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			
			image{
				width: 50%;
				display: block;
			}
		}
	}
</style>
